<template>
  <div class="locale-wrapper">
    <a-dropdown>
      <a class="ant-dropdown-link" href="#">
        {{ $route.query.locale === "zhCN" ? "中文" : "English" }}
        <a-icon type="global" />
      </a>
      <a-menu
        slot="overlay"
        @click="handleChangeLocale"
        :selectedKeys="[$route.query.locale || 'zhCN']"
      >
        <a-menu-item key="zhCN">
          中文
        </a-menu-item>
        <a-menu-item key="enUS">
          English
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {};
  },
  methods: {
    handleChangeLocale({ key }) {
      this.$router.push({ query: { ...this.$route.query, locale: key } });
      this.$i18n.locale = key;
    }
  }
};
</script>

<style lang="less">
.locale-wrapper {
  float: right;
  margin-right: 30px;
}
</style>
